<template>
  <div class="login_container">
    <div class="login_box">
      <!-- logo区域 -->
      <div class="avatar_box">
        <img src="~@/assets/imgs/logo.png" alt="" />
      </div>
      <!-- 表单区域 -->
      <el-form
        ref="loginForm"
        :rules="loginFormRules"
        :model="loginForm"
        label-width="0px"
        class="login_form"
      >
        <h3 class="title">Shop.System.Web</h3>
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            type="password"
          ></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width: 100%"
            @click="login"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { userLogin } from "../network/login";

export default {
  name: "Login",
  data() {
    return {
      //表单数据
      loginForm: {
        username: "admin",
        password: "123456",
      },
      // 表单的验证规则
      loginFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      loading: false,
    };
  },
  methods: {
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (!valid) return;
        this.loading = true;

        userLogin(this.loginForm.username, this.loginForm.password)
          .then((res) => {
            this.loading = false;
            if (res.meta.status != 200)
              return this.$message.error("登录失败！" + res.meta.msg);

            this.$message.success("登录成功！");

            // 将token进行保存
            window.sessionStorage.setItem("token", res.data.token);
            this.$router.push("./home");
          })
          .catch((error) => {
            this.$message.error("登录失败！" + error);
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login_container {
  height: 100%;

  background: url("~@/assets/imgs/bakground.jpg");
  background-repeat: no-repeat;
  background-size: cover;

  // 居中的方式一
  // display: flex;
  // align-items: center;
  // justify-content: center;
}
.login_box {
  width: 500px;
  height: 330px;
  background-color: #e0e6f8;
  border-radius: 3px;
  box-shadow: 2px 2px 4px #a9d0f5, -2px -2px 5px #a9d0f5;
  opacity: 0.85;
  // 居中二
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.avatar_box {
  height: 120px;
  width: 120px;
  border: 2px solid #e0e6f8;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #e0e6f8;
  // logo的偏移
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: #e0e6f8;
  }
}

// 表单
.login_form {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
// 标题
.title {
  text-align: center;
  color: #2e2e2e;
  font-size: 23px;
}
.el-input,
.el-button {
  font-size: 18px;
}
</style>